@import '../variables/default.scss';
@import '../mixins/index.scss';

@keyframes atRotate {
  0% {
    //transform: rotate(0deg);
  }

  100% {
    //transform: rotate(360deg);
  }
}

$at-toast-min-width: 256px !default;
$at-toast-image-size: 120px !default;
$at-toast-font-size: $font-size-base !default;
$at-toast-icon-size: 80px !default;
$at-toast-color: $color-white;
$at-toast-bg-color: rgba($color: $color-black-0, $alpha: 0.8);

.at-toast {
  /* elements */
  &__overlay {
    @include overlay;
    /*postcss-pxtransform rn eject enable*/
    position: fixed;
    /*postcss-pxtransform rn eject disable*/
    opacity: 0;
    z-index: $zindex-toast;
  }

  &__body {
    &--loading {
      .toast-body-content__img-item {
        animation: atRotate 1350ms linear infinite;
      }
    }
  }
}

.toast-body {
  /*postcss-pxtransform rn eject enable*/
  @include absolute-center(fixed);
  /*postcss-pxtransform rn eject disable*/

  padding: $spacing-v-lg $spacing-h-xl;
  width: $at-toast-min-width;
  border-radius: $border-radius-md;
  background-color: $at-toast-bg-color;
  z-index: $zindex-toast;

  &--RN {
    left: (750px - $at-toast-min-width) / 2;
  }

  &-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &__icon {
      color: $at-toast-color;
      font-size: $at-toast-icon-size;
      text-align: center;
    }

    &__img {
      line-height: 0;
      text-align: center;

      &-item {
        width: $at-toast-image-size;
        height: $at-toast-image-size;
      }
    }

    &__info {
      margin-top: $spacing-v-md;
      &--text {
        margin-top: 0;
      }

      &__text {
        color: $at-toast-color;
        font-size: $at-toast-font-size;
        line-height: $line-height-zh * $at-toast-font-size;
        text-align: center;
      }
    }
  }

  &--text {
    font-size: $font-size-base;
    padding: $spacing-v-sm $spacing-h-lg;
    line-height: $line-height-zh * $font-size-base;
    /*postcss-pxtransform rn eject enable*/
    min-width: initial;
    /*postcss-pxtransform rn eject disable*/
  }

  &.at-toast__body--custom-image,
  &.at-toast__body--success,
  &.at-toast__body--error,
  &.at-toast__body--loading {
    padding-bottom: $spacing-v-lg - (($at-toast-font-size * $line-height-zh - $at-toast-font-size) / 2);
  }
}
